<template>
  <div class="payContainer">
    <span>请选择支付方式</span>
    <div class="alipay">
      <van-radio-group v-model="checked">
        <van-radio name="1"><van-icon name="alipay" color="#00a1e9" class="alipayicon"/>支付宝支付</van-radio>
      </van-radio-group>
     
    </div>
    <div class="wechatpay">
      <van-radio-group v-model="checked">
        <van-radio name="2"><van-icon name="wechat" color="#00c901" class="alipayicon"/>微信支付</van-radio>
      </van-radio-group>
    </div>

    <div class="footer" @click="toPay">
     确定
    </div>
    <van-dialog v-model:show="show" title="标题" show-cancel-button @confirm="paysuccess">
      <img :src="payImg" alt="">
    </van-dialog>

  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
// import router from '@/router';
export default defineComponent({
  name: 'Pay'
})
</script>
<script lang="ts" setup>

import { onMounted } from 'vue';

import QRCode from 'qrcode'
import { useRouter } from 'vue-router';
const router = useRouter()





onMounted(()=>{
  // getQrCode()
})

const checked = ref('1')

const show = ref(false)

const payImg=ref('')
const toPay=async()=>{ 
  show.value = true
  payImg.value = await QRCode.toDataURL('weixin://wxpay/bizpayurl?pr=oihjAvhzz')
//  console.log(payImg.value);
//  router.push('/paysuccess')

}

const paysuccess = () => {
  router.push('/paysuccess')

}
const aa = ()=>{
 
}
</script>

<style lang="less" scoped>
.payContainer{
  width: 100%;
  background-color: #f4f4f4;
  position: relative;
  img{
    width: 200px;
    height: 200px;
    margin-left: 50px;
  }
  span{
    font-size: 14px;
    color: #999999;
  }
  .alipay{
    width: 100%;
    height: 52px;
    // background-color: aqua;
    line-height: 52px;
    display: flex;
    align-items: center;
    .alipayicon{
      margin-right:10px
    }
  }
  .wechatpay{
    width: 100%;
    height: 52px;
    // background-color: aqua;
    line-height: 52px;
    display: flex;
    align-items: center;
    .alipayicon{
      margin-right:10px
    }
  }
  .footer{
    width: 100%;
    height: 48px;
    line-height: 48px;
    background-color: #b4282d;
    text-align: center;
    color: white;
    position: absolute;
    bottom: -480px;
  }
  
}
</style>
